<template>
    <div class="container">

      <div class="parent">
        <div class="sub">
        </div>
      </div>

      <div class="parent p1">
        <div class="sub">
        </div>
      </div>

      <div class="parent p2">
        <div class="sub">
        </div>
      </div>

      <div class="parent p3">
        <div class="sub">
        </div>
      </div>

      <div class="parent p4">
        <div class="sub">
        </div>
      </div>

      <div class="parent p5">
        <div class="sub">
        </div>
      </div>

      <div class="parent p6">
        <div class="sub">
        </div>
      </div>
      <div class="parent p7">
        <div class="sub">
        </div>
      </div>
      <div class="parent p8">
        <div class="sub">
        </div>
      </div>

      <div class="parent p9">
        <div class="sub">
        </div>

        <div class="sub">
        </div>
      </div>

      <div class="parent p10">
        <div class="sub">
        </div>

        <div class="sub">
        </div>
      </div>

      <div class="parent p11">
        <div class="sub">
        </div>

        <div class="sub">
        </div>
      </div>

      <div class="parent p12">
        <div class="sub">
        </div>

        <div class="sub">
        </div>
      </div>

      <div class="parent p13">
        <div class="sub">
        </div>

        <div class="sub sub1">
        </div>
      </div>

      <div class="parent p14">
        <div class="sub">
        </div>

        <div class="sub sub3">
        </div>
      </div>



    </div>
</template>

<script>
  export default {
    name: 'Cs',
    data(){
      return{

      }
    }
  }
</script>

<style scoped>
  .container{
    display: flex;
    flex-wrap: wrap;
  }

  .parent{
    width: 150px;
    height: 150px;
    background-color: red;
    padding: 10px;
    display: flex;
    margin: 10px;
    border:5px solid yellow;
  }

  .p1{
    justify-content: center;
  }

  .p2{
    justify-content: flex-end;
  }

  .p3{
    align-items: center;
  }

  .p4{
    align-items: center;
    justify-content: center;
  }

  .p5{
    align-items: center;
    justify-content: flex-end;
  }

  .p6{
    align-items: flex-end;
    justify-content: flex-start;
  }

  .p7{
    align-items: flex-end;
    justify-content: center;
  }

  .p8{
    align-items: flex-end;
    justify-content: flex-end;
  }
  .p9{
    justify-content: space-between;
  }

  .p10{
    justify-content: space-between;
    flex-direction: column;
  }

  .p11{
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
  }

  .p12{
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-end;
  }

  .sub{
    width: 40px;
    height: 40px;
    background-color: yellow;
    border-radius:20px;
    /*margin: 10px;*/
  }

  .sub1{
    margin-left: -40px;
  }

  .p14{
    justify-content: space-between;
  }

  .sub3{
    align-self: flex-end;
  }

</style>
